<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <!-- 这是个iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；-->
    <meta content="yes" name="apple-mobile-web-app-capable">
    <!-- 全屏显示-->
    <meta name="apple-touch-fullscreen" content="yes">
    <!-- 不要让设备识别电话号码和邮箱地址-->
    <meta content="telephone=no,email=no" name="format-detection">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" id="viewport" name="viewport">
    <!-- DNS预解析-->
    <meta http-equiv="x-dns-prefetch-control" content="on">

    <link href="../css/common/mui.min.css" rel="stylesheet">
    <link href="../css/common/reset.css" rel="stylesheet">
    <link href="../css/common/common.css" rel="stylesheet">
    <link href="../css/animate.css" rel="stylesheet">
    <link href="../css/spot-check.css" rel="stylesheet">
    <link href="../css/common/mui.min.css" rel="stylesheet">
    <link href="../css/common/ydui.css" rel="stylesheet">

    <link href="../css/select-modal.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/cityStyle.css" />

    <script src="../js/zepto-1.1.4.min.js"></script>
    <script src="../js/mui.min.js"></script>
    
    <title>特训抽查</title>
    
  </head>
  <body>
    <div class="spot-check">
        <div class="select-list">
            <!-- <div class="item sale" >
                <input type="text" readonly id="J_Address" placeholder="选择区域">
                <span class="mui-icon mui-icon-arrowright"></span>
                <i class="icon"></i>
            </div> -->
            <div class="item area" >
                <input type="text" readonly placeholder="选择区域">
                <span class="mui-icon mui-icon-arrowright"></span>
                <i class="icon"></i>
            </div>
            <div class="item area_chajian" >
                <input type="text" readonly placeholder="选择区域">
                <span class="mui-icon mui-icon-arrowright"></span>
                <i class="icon"></i>
            </div>
            <div class="item store">
                <input type="text" readonly id="J_Address1" placeholder="选择门店">
                <span class="mui-icon mui-icon-arrowright"></span>
                <i class="icon"></i>
            </div>
            <div class="item course">
                <input type="text" readonly id="J_Address2" placeholder="选择课程">
                <span class="mui-icon mui-icon-arrowright"></span>
                <i class="icon"></i>
            </div>
            <div class="item test-num">
                <input type="text" readonly id="J_Address3" placeholder="选择试题数量">
                <span class="mui-icon mui-icon-arrowright"></span>
                <i class="icon"></i>
            </div>
        </div>
        <div class="btn-box">
            <button class="btn-lexus">生成抽查</button>
        </div>
    </div>

    <!-- 选择门店 -->
    <div class="select-modal-1" style="display: none">
        <div class="select-container">
            <div class="select-header">
                <span class="left">选择门店</span>
                <span class="right">确定</span>
            </div>
            <div class="select-warpper mui-scroll-wrapper">
                <div class="mui-scroll">
                    <div class="item">门店1</div>
                    <div class="item">门店2</div>
                    <div class="item">门店3</div>
                    <div class="item">门店4</div>
                    <div class="item">门店5</div>
                    <div class="item">门店6</div>
                    <div class="item">门店7</div>
                    <div class="item">门店8</div>  
                    <div class="item">门店9</div>
                </div>             
            </div>
        </div>
    </div>

    <!-- 选择课程 -->
    <div class="select-modal-1 select-course" style="display: none">
        <div class="select-container">
            <div class="select-header">
                <span class="left">取消</span>                
                <span class="left">请选择课程</span>
                <span class="right">确定</span>
            </div>
            <div class="select-warpper mui-scroll-wrapper">
                <div class="mui-scroll">
                    <div class="item">
                        <span class="icon"></span>
                        <span>全选</span>
                    </div>
                    <div class="item">
                        <span class="icon"></span>
                        <span>产品亮点1</span>
                    </div>
                    <div class="item">
                        <span class="icon"></span>
                        <span>产品亮点2</span>
                    </div>
                    <div class="item">
                        <span class="icon"></span>
                        <span>市场销售策略</span>
                    </div>
                    <div class="item">
                        <span class="icon"></span>
                        <span>竞品分析</span>
                    </div>
                    <div class="item">
                        <span class="icon"></span>
                        <span>竞品分析</span>
                    </div>
                    <div class="item">
                        <span class="icon"></span>
                        <span>竞品分析</span>
                    </div>
                </div>             
            </div>
        </div>
    </div>

    <!-- 选择试题数量 -->
    <div class="select-modal-1" style="display: none">
        <div class="select-container">
            <div class="select-header">
                <span class="left">选择试题数量</span>
                <span class="right">确定</span>
            </div>
            <div class="select-warpper mui-scroll-wrapper">
                <div class="mui-scroll">
                    <div class="item">10</div>
                    <div class="item">11</div>
                    <div class="item">12</div>
                    <div class="item">13</div>
                    <div class="item">14</div>
                    <div class="item">15</div>
                    <div class="item">16</div>
                    <div class="item">17</div>  
                    <div class="item">18</div>
                </div>             
            </div>
        </div>
    </div>

    <!-- 选择销售经理 -->
    <div class="select-modal-4" style="display: none">
        <div class="select-container">
            <div class="select-header">
                <p>
                    <span class="store">茅台路店</span>
                    <span class="left">请选择销售经理</span>
                </p>
                <p>
                    <span class="right">确定</span>
                </p>
            </div>
            <div class="select-warpper mui-scroll-wrapper">
                <div class="mui-scroll">
                    <div class="item">张秀霞</div>
                    <div class="item">胡型选</div>
                    <div class="item">胡型选</div>
                    <div class="item">胡型选</div>
                    <div class="item">胡型选</div>
                    <div class="item">胡型选</div>
                    <div class="item">胡型选</div> 
                    <div class="item">胡型选</div>  
                    <div class="item">胡型选</div>
                    <div class="item">胡型选</div>
                    <div class="item">胡型选</div>
                    <div class="item">胡型选</div>
                    <div class="item">胡型选</div>               
                </div>
            </div>
        </div>
    </div>

    <!-- 选择区域 -->
    <div class="modal-container" style="display: none;">
        <div class="select-container">
            <div class="select-header">
                <span class="left">请选择大区</span>

                <i class="selectTab">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </i>
                
                <span class="right">确定</span>
            </div>
            <div class="select-warpper mui-scroll-wrapper">
                <div class="mui-scroll level1-content">
                    <div class="radio-item">
                        <i></i>
                        <span>华北区</span>
                    </div>
                    <div class="radio-item act">
                        <i></i>
                        <span>华北区</span>
                    </div>
                    <div class="radio-item">
                        <i></i>
                        <span>华北区</span>
                    </div>
                    <div class="radio-item">
                        <i></i>
                        <span>华北区</span>
                    </div>
                    <div class="radio-item">
                        <i></i>
                        <span>华北区</span>
                    </div>
                    <div class="radio-item">
                        <i></i>
                        <span>华北区</span>
                    </div>
                </div>             
            </div>
        </div>
    </div>
    <div class="mask-black-bg" style="display: none;"></div>


    <script src="../js/remset.js"></script>

    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <!-- <script src="http://static.ydcss.com/uploads/ydui/ydui.citys.js"></script> -->

    <script src="../js/city.js"></script>
    
    <script src="../js/ydui2.js"></script>

    <script>
        mui('.mui-scroll-wrapper').scroll({
            scrollY: true, // 是否竖向滚动
            scrollX: false, // 是否横向滚动
            startX: 0, // 初始化时滚动至x
            startY: 0, // 初始化时滚动至y
            indicators: true, // 是否显示滚动条
            deceleration: 0.0005, // 阻尼系数,系数越小滑动越灵敏 flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
            bounce: true // 是否启用回弹
        });

        // 单选点击
        // $('.item').click(function() {
        //     $(this).addClass('active').siblings().removeClass('active')
        // })


        // 门店
        $('.store').click(function() {
            $('.select-modal-1').eq(0).show()
        })
        $('.select-modal-1 .right').click(function() {
            $('.select-modal-1').eq(0).hide()
        })

    /* 课程 */
        $('.course').click(function() {
            $('.select-modal-1').eq(1).show()
        })
        $('.select-modal-1 .right').click(function() {
            $('.select-modal-1').eq(1).hide()
        })
        $('.select-course .select-header span').first().click(function() {
            $('.select-modal-1').eq(1).hide()
        })
        // 多选事件
        var courseDom = $('.select-course .item')

        courseDom.not(courseDom.first()).click(function() {
            $(this).hasClass('active') ? $(this).removeClass('active') : $(this).addClass('active')
        })
        // 全选点击事件
        courseDom.first().click(function() {
            var hasActiveCls = $(this).hasClass('active')

            hasActiveCls ? $(this).removeClass('active') : $(this).addClass('active')

            hasActiveCls ? selAll(false) : selAll(true)
        })

        function selAll(active) {
            courseDom.not(courseDom.first()).each(function() {
                active 
                    ? !$(this).hasClass('active') && $(this).addClass('active')
                    : $(this).hasClass('active') && $(this).removeClass('active')
            })
        }
        

        // 试题数量
        $('.test-num').click(function() {
            $('.select-modal-1').eq(2).show()
        })
        $('.select-modal-1 .right').click(function() {
            $('.select-modal-1').eq(2).hide()
        })


        var $address = $('#J_Address');

        $address.citySelect();

        $address.on('click', function (event) {
            event.stopPropagation();
            $address.citySelect('open');
        });

        $address.on('done.ydui.cityselect', function (ret) {
            /* 省：ret.provance */
            /* 市：ret.city */
            /* 县：ret.area */
            $(this).val(ret.provance + ' ' + ret.city + ' ' + ret.area);
        });
    </script>

    <script type="module">
        /**
         * @param {动态引入city.js参数} 可以改成ajax请求
         * @params {tip} 头提示文字
         * @params {cityData} 组件的结构数据
         * 
         */
        // import {city} from './city.js'
        // console.log(city)
    

        $('.area').click(function() {

            $('.modal-container').show()          
        })

        $('.area_chajian').click(function() {
            let selectVal = new CitySelect({
                "tip": "请选择大区",
                "callback": function (val) {
                    console.log(val)
                }
            });
        })
        
    </script>
    <script type="text/javascript" src="../js/citySelect.js"></script>
  </body>
</html>